import 'package:beamer/beamer.dart';
import 'package:flutter/material.dart';

GlobalKey<_GoodsDetailsScrollTitleState> goodsDetailsScrollTitleKey =
    GlobalKey(debugLabel: 'goodsDetailsScrollTitleKey');

class GoodsDetailsScrollTitle extends StatefulWidget {
  final Function titleOnTap;
  const GoodsDetailsScrollTitle({Key? key, required this.titleOnTap}) : super(key: key);

  @override
  State<GoodsDetailsScrollTitle> createState() => _GoodsDetailsScrollTitleState();
}

class _GoodsDetailsScrollTitleState extends State<GoodsDetailsScrollTitle> with TickerProviderStateMixin {
  late TabController _tabController;
  double opacityState = 0.0;
  double _tabbarHeight = 0.0;
  bool _isClick = false;
  bool absorb = false;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 4, vsync: this);
  }

  @override
  void dispose() {
    super.dispose();
    _tabController.dispose();
  }

  void cancelIsClick() {
    _isClick = false;
  }

  void getGoodsDetailsPageOpacity(
    double opacity,
    double goodsDy,
    double commentsDy,
    double recommentsDy,
    double detailsDy,
  ) {
    setState(() {
      if (!_isClick) {
        if (goodsDy <= _tabbarHeight && commentsDy > _tabbarHeight) {
          _tabController.animateTo(0);
        } else if (commentsDy <= _tabbarHeight && recommentsDy > _tabbarHeight) {
          _tabController.animateTo(1);
        } else if (recommentsDy <= _tabbarHeight && detailsDy > _tabbarHeight) {
          _tabController.animateTo(2);
        } else {
          _tabController.animateTo(3);
        }
      }
      opacityState = ((0.0-opacity).abs() > 1.0) ? 1.0 : (0.0-opacity).abs();
      absorb = opacityState == 1.0 ? false : true;
    });
  }

  @override
  Widget build(BuildContext context) {
    _tabbarHeight = 40 + MediaQuery.of(context).padding.top;
    return Positioned(
      top: 0,
      left: 0,
      child: Opacity(
        opacity: (opacityState.abs() > 1.0) ? 1.0 : opacityState.abs(),
        child: Container(
          width: MediaQuery.of(context).size.width,
          height: 40 + MediaQuery.of(context).padding.top,
          decoration: const BoxDecoration(color: Colors.white),
          child: SafeArea(
            child: Stack(
              children: [
                Positioned(top: 0, left: 0, child: _buildBackButton()),
                Container(
                  height: 40,
                  padding: const EdgeInsets.symmetric(horizontal: 40),
                  child: AbsorbPointer(
                    absorbing: absorb,
                    child: TabBar(
                    onTap: (int index) {
                      _isClick = true;
                      widget.titleOnTap(index);
                    },
                    controller: _tabController,
                    labelColor: const Color(0xFF00CE8A),
                    unselectedLabelColor: Colors.grey,
                    indicatorColor: const Color(0xFF00CE8A),
                    indicatorPadding: const EdgeInsets.only(left: 4, right: 4, bottom: 2),
                    indicatorSize: TabBarIndicatorSize.label,
                    tabs: const <Widget>[Text("商品"), Text("評價"), Text("推薦"), Text("詳情")],
                  ),
                  )
                )
              ],
            ),
          ),
        ),
      ),
    );
  }

  // 返回按钮
  Widget _buildBackButton() {
    return GestureDetector(
      onTap: () {
        Beamer.of(context).beamBack();
      },
      child: const SizedBox(
        width: 40,
        height: 40,
        child: Icon(
          Icons.chevron_left_outlined,
          size: 28,
          color: Colors.black,
        ),
      ),
    );
  }
}
